<template>
	<view>
		<view class="lunbo">
			<swiper :indicator-dots="yincang" class="swiper" circular indicator-dots indicator-color="#ffffff">
				<swiper-item v-for="(item, index) in lunbo" :key='index'>
					<image :src="item" mode="aspectFill" class="swiper-image" />
				</swiper-item>
			</swiper>
		</view>
		<view class="xinxi">
			<view class="yanse">
				<view class="fense"></view>
				<view class="hongse"></view>
			</view>
			<view class="zhuyaoxinxi">
				<text class='description'>{{con.description}}</text>
				<text class='yuexiaoshoucang'>月销 {{con.yuexiao}} {{con.shoucang}}收藏</text>
				<text class='jiage'>￥{{ckon.data.vip_price}}</text>
				<text class='xiangmu'>{{con.xiangmu}}</text>
				<view class="zhixian"></view>
				<view class="zuo">
					<text>限制</text>
					<text>须知</text>
					<text>保障</text>
				</view>
				<view class="you">
					<text class='xianzhi'>{{con.xianzhi}}</text>
					<text class='xuzhi'>{{con.xuzhi}} ></text>
					<text class='baozhang'>{{con.baozhang}} ></text>
				</view>
				<image class='kapaibeijing' src="/static/images/kapaibeijing.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="fuwuxiangqing">
			<view class="juxing"></view>
			<text class="miaoshu">服务详情</text>
			<view class="xiangqing_kuang">
				<view class="xiang" v-for="(item, index) in con.xiangqing">
					<view class="dian"></view>
					<view class='hang'><text>{{item.ming}}</text></view>
					<view class='hang' v-for="(item1, index1) in item.neirong">
						<text>{{item1[0]}}</text>
						<text>（{{item1[1]}} 份）</text>
						<text>￥{{item1[2]}}</text>
					</view>
					<view class="hengxian"></view>
				</view>
				<view class="xiang">
					<view class="dian"></view>
					<view class='hang'><text>备注</text></view>
					<view class='hang'><text>{{con.beizhu}}</text></view>
					<view class="hengxian"></view>
				</view>
				<view class="tu">
					<image v-for="(item, index) in con.images" :src="item" mode="widthFix"></image>
				</view>
			</view>
			<!-- <rich-text :nodes="con.rr"></rich-text> -->
		</view>
		<view class="gouwuxuzhi">
			<view class="juxing"></view>
			<text class="miaoshu">购物须知</text>
			<view class="xiangqing_kuang">
				<view class="xiang">
					<view class="dian"></view>
					<view class='hang'><text>有效期</text></view>
					<view class="hengxian">2023.7.13至2024.12.22 23:59</view>
				</view>
				<view class="xiang">
					<view class="dian"></view>
					<view class='hang'><text>使用时间</text></view>
					<view class='hang'><text>营业时间内可用</text></view>
					<view class="hengxian"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunbo: [],
				yincang: false,
				ckon:{
				  "code": 1,
				  "msg": "返回成功",
				  "time": "1742520646",
				  "data": {
					"id": 78,
					"goods_cat": "STANDARD",
					"shipping_desc": "",
					"desc_3": "",
					"desc_2": "",
					"desc_1": "",
					"shop_id": 6,
					"shop_category_id": "10",
					"category_id": 12,
					"brand_id": 5,
					"category_attribute": null,
					"title": "藏医好药 专治胃炎",
					"image": "/uploads/20250220/f81c6cefb49e3e284017bd0cb3ff2759.png",
					"images": [
					  "/uploads/20250220/a0015fe01f4a2a0acb980f2c20ecf746.png",
					  "/uploads/20250220/f81c6cefb49e3e284017bd0cb3ff2759.png"
					],
					"description": "净含量500g/盒",
					"flag": "",
					"stock": "porder",
					"content": "<p><img src=\"https://xinmoban.ascetic.top/uploads/20250220/325746f4098123e5a2da5ce8cd06f0f1.png\" style=\"width: 717px;\" data-filename=\"filename\"><br></p>",
					"freight_id": 13,
					"grounding": 0,
					"specs": "single",
					"distribution": "false",
					"activity": "0",
					"activity_id": 0,
					"activity_type": "goods",
					"views": 32,
					"price": "23.00",
					"sales": 1,
					"payment": 1,
					"comment": 0,
					"praise": 0,
					"moderate": 0,
					"negative": 0,
					"like": 0,
					"weigh": 78,
					"createtime": 1740019587,
					"updatetime": 1740020674,
					"deletetime": null,
					"status": "normal",
					"is_chufang": 0,
					"company": "哈药六厂",
					"delivery_type": 3,
					"vip_price": "22.00",
					"audit": 1,
					"why": null,
					"commission_method": "1",
					"user_commission": "5.00",
					"vip_commission": "10.00",
					"autoup": 0,
					"cost_price": null,
					"instructions": "/uploads/20250220/a0015fe01f4a2a0acb980f2c20ecf746.png",
					"subtitle": null,
					"is_list": 0
				  }
				},
				con: {
					description: '优惠价格',
					yuexiao: '200+',
					shoucang: 0,
					jiage: 127,
					xiangmu: '宠粉双人餐(不含蘸料)',
					xianzhi: '商品每桌限用1张',
					xuzhi: '周一至周日可用',
					baozhang: '随时退·过期自动退',
					beizhu: '温馨提示，超出套餐小料需要另付5元/位',
					xiangqing: [
						{
							ming: '老伙夫锅底',
							neirong: [
								['秘制香辣锅底(换锅底需补差价)', '1', '30']
							]
						},
						{
							ming: '荤菜',
							neirong: [
								['大片毛肚', '1', '34'],
								['麻辣牛肉', '1', '29'],
								['臻品肥牛', '1', '30'],
								['四色小肉肠', '1', '22'],
								['鸭血', '1', '14'],
								['安井墨鱼丸', '1', '14']
							]
						},
						{
							ming: '主食',
							neirong: [
								['冷面', '1', '12']
							]
						},
						{
							ming: '小料',
							neirong: [
								['小料', '3', '15']
							]
						}
					],
					images: ['https://www.lichu2025.cn/uploads/20250220/a0015fe01f4a2a0acb980f2c20ecf746.png', 'https://www.lichu2025.cn/uploads/20250220/f81c6cefb49e3e284017bd0cb3ff2759.png']
				}
			};
		},
		mounted() {
			this.chushihua()
			// this.huoqujingweidu()
			this.huoquxiangqing()
		},
		methods:{
			chushihua(){
				this.lunbo = ['https://www.lichu2025.cn/uploads/20250318/f7c672530bcec38aed0a462489dfd1e5.png?x-oss-process=image/auto-orient,1/interlace,1/format,jpg/quality,q_90/sharpen,50/resize,m_fill,w_360,h_360', 'https://www.lichu2025.cn/uploads/20250318/f7c672530bcec38aed0a462489dfd1e5.png?x-oss-process=image/auto-orient,1/interlace,1/format,jpg/quality,q_90/sharpen,50/resize,m_fill,w_360,h_360', 'https://www.lichu2025.cn/uploads/20250318/f7c672530bcec38aed0a462489dfd1e5.png?x-oss-process=image/auto-orient,1/interlace,1/format,jpg/quality,q_90/sharpen,50/resize,m_fill,w_360,h_360']
			},
			jiagechuli(e){
				if(e > 0){return `￥${e}`}
			},
			huoqujingweidu(){
				wx.getLocation({
					complete(res){
						console.log(res)
					}
				})
			},
			sui(e = 50000000){
				return Math.floor(Math.random()*e)
			},
			huoquxiangqing(){
				console.log(443)
				wx.request({
					url: 'https://www.lichu2025.cn/mchomepage/getGoodsInfo',
					method: 'POST',
					header: {"Content-Type": "application/x-www-form-urlencoded"},
					data: {
						id: 80
					},
					success(res){
						console.log(444)
						console.log(res.data)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lunbo{
		position: relative;
		width: 750rpx;
		height: 497rpx;
		swiper{
			width: 750rpx;
			height: 497rpx;
		}
		image{
			width: 750rpx;
			height: 497rpx;
		}
	}
	.xinxi{
		font-family: HarmonyOS Sans SC;
		position: relative;
		top: -43px;
		left: 0px;
		width: 750rpx;
		height: 414rpx;
		opacity: 1;
		.zhuyaoxinxi{
			z-index: 2;
			position: absolute;
			left: 26rpx;
			top: 23rpx;
			width: 695rpx;
			height: 391rpx;
			opacity: 1;
			.kapaibeijing{
				position: absolute;
				width:695rpx;
				height: 391rpx;
				display: block;
			}
			.description{
				z-index: 99;
				position: absolute;
				left: 35rpx;
				top: 18rpx;
				width: 104rpx;
				height: 42rpx;
				opacity: 1;
				font-family: HarmonyOS Sans SC;
				font-size: 26rpx;
				font-weight: normal;
				line-height: 158.67%;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #FB4E2F;
			}
			.yuexiaoshoucang{
				position: absolute;
				left: 490rpx;
				top: 0rpx;
				width: 214rpx;
				height: 42rpx;
				z-index: 9;
				color: white;
				font-size: 26rpx;
			}
			.jiage{
				position: absolute;
				left: 20rpx;
				top: 70rpx;
				width: 141rpx;
				height: 96rpx;
				opacity: 1;
				z-index: 99;
				font-family: HarmonyOS Sans SC;
				font-size: 60rpx;
				font-weight: 500;
				color: #FB4E2F;
			}
			.xiangmu{
				position: absolute;
				left: 259rpx;
				top: 90rpx;
				width: 350rpx;
				height: 58rpx;
				opacity: 1;
				z-index: 999;
				font-size: 36rpx;
				font-weight: 500;
			}
			.zhixian{
				z-index: 1;
				position: absolute;
				left: 20rpx;
				top: 160rpx;
				width: 650rpx;
				height: 0px;
				opacity: 1;
				display: flex;
				flex-direction: undefined;
				justify-content: undefined;
				align-items: undefined;
				padding: NaNpx;
				border: 1px dashed #D8D8D8;
			}
			.zuo, .you{
				z-index: 1;
				font-size: 26rpx;
				position: absolute;
				font-weight: normal;
				letter-spacing: 0em;
				height: 175rpx;
				top: 180rpx;
				text{
					display: block;
					line-height: 223.67%;
				}
			}
			.zuo{
				width: 52rpx;
				left: 40rpx;
			}
			.you{
				width: 300rpx;
				left: 140rpx;
				color: #999999;
			}
			.xianzhi, .xuzhi, .baozhang{z-index: 1;}
			
		}
		.yanse{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 750rpx;
			height: 414rpx;
			overflow: hidden;
			opacity: 1;
			border-radius: 50rpx;
			.hongse{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 750rpx;
				height: 344rpx;
				border-radius: 50rpx 50rpx 0px 0px;
				opacity: 1;
				display: flex;
				flex-direction: undefined;
				justify-content: undefined;
				align-items: undefined;
				padding: NaNpx;
				background: linear-gradient(180deg, #FB4E2F 4%, #F7F7F7 100%);
			}
			.fense{
				position: absolute;
				left: 444rpx;
				top: -200rpx;
				width: 501rpx;
				height: 346rpx;
				opacity: 1;
				
				/* 自动布局 */
				display: flex;
				flex-direction: undefined;
				justify-content: undefined;
				align-items: undefined;
				padding: NaNpx;
				
				background: #FF008C;
				z-index: 1;
				filter: blur(44rpx);
			}
		}
	}
	.fuwuxiangqing, .gouwuxuzhi, .shiyongshanghu{
		position: relative;
		width: 750rpx;
	}
	.fuwuxiangqing, .gouwuxuzhi{
		top: -80rpx;
		padding-top: 30rpx;
		.juxing{
			position: absolute;
			left: 30rpx;
			top: 35rpx;
			width: 8rpx;
			height: 34rpx;
			border-radius: 50rpx;
			opacity: 1;
			background: #FB4E2F;
		}
		.miaoshu{
			position: absolute;
			font-size: 33rpx;
			left: 50rpx;
		}
		.xiangqing_kuang{
			padding-top: 10rpx;
			border-radius: 20rpx;
			width: 690rpx;
			background: white;
			margin-left: 30rpx;
			margin-top: 60rpx;
			.xiang{
				position: relative;
				.dian{
					position: absolute;
					left: 15rpx;
					top: 15rpx;
					width: 10rpx;
					height: 10rpx;
					opacity: 1;
					background: #D8D8D8;
					border-radius: 20rpx;
				}
				.hengxian{
					left: 24rpx;
					top: 132rpx;
					width: 600rpx;
					height: 0px;
					opacity: 1;
					border-top: 1px solid #D8D8D8;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					margin-left: 40rpx;
				}
				.hang{
					font-size: 26rpx;
					position: relative;
					height: 40rpx;
					margin-top: 10rpx;
					text{
						&:nth-child(1){
							margin-left: 40rpx;
						}
						&:nth-child(2){
							position: absolute;
							left: 474rpx;
							color: #999;
						}
						&:nth-child(3){
							position: absolute;
							left: 590rpx;
						}
					}
				}
			}
			.tu{
				image{
					width: 596rpx;
					margin-left: 30rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.gouwuxuzhi{
		
	}
</style>
